/* Map view */
	// Map view leaflet map specific mixin
	@mixin modified-leaflet-map() {
		#map {
			width: 100%;
			.leaflet-left .leaflet-control {
			    margin-left: 280px;
			    transition: margin 0.3s ease-in-out;
			}
			
		}

		#map.unpush-map {
			transform: translateX(0%);
			transition: all 0.5s ease-in-out;
			.leaflet-left .leaflet-control {
			    margin-left: 10px;
			    transition: margin 0.3s ease-in-out;
			}
		}

		.leaflet-popup-close-button {
			display: none;
		}

		.leaflet-top {
		   // top: 50px !important;
		}
		.leaflet-top .leaflet-control {
		    margin-top: 22px;
		}
		.leaflet-control-layers-toggle {
		    background-image: url(../images/layers.png) !important;
		}
		.leaflet-control-layers-overlays {
			position: relative;
			max-width: 250px;
			.map-control-hint {
				font-style: italic;
			}
			.map-control-hint-text {
				display: none;
			}
		}

		.leaflet-popup-content-wrapper, .leaflet-popup-tip {
			padding: 0;
			.leaflet-popup-content {
				margin: 0;
			}
		}

		.foobar {
			.home-user-info {
				border: none;
			}
			.name-and-screen-name {
				display: block;
			}
			h4 {
				position: absolute;
				right: 0;
				min-width: 87.1px;
				box-sizing: border-box;
				text-align: center;
				float: right;
				color: white;
				background-color: #55acee;
				background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.05));
				box-shadow: inset 0 1px 0 rgba(255,255,255,0.15);
			    border: 1px solid #3b88c3;
			    padding: 8px 12px 9px 12px;
			    display: inline-block;
			    font-size: 14px;
			    font-weight: bold;
			    line-height: normal;
			    border-radius: 4px;
			    margin-top: 32px;
		        margin-right: 12px;
				&:hover {
					cursor: pointer;
				}
			}

			h4.follow-button, h4.fresh-follow-button {
				background-color: white;
				color: $search-twitter-blue;
			}

			h4.unfollow-button {
				background-color: #be1931;
				border: 1px solid #a0041e;
			}
		}
	}

	.content-wrapper.map-view {
		transition: all 0.5s ease-in-out !important;
		opacity: 1;
		position: absolute;
		width: 100vw;
		height: 100vh;
		top: 0;
		@include modified-leaflet-map();
		
	}
	.content-wrapper.map-view.ng-hide {
		opacity: 0;
		transition: all 0.5s ease-in-out !important;
		@include modified-leaflet-map();
	}

	.logged-content.map-container-parent {
		@include modified-leaflet-map();
		transition: all 0.3s ease-in-out !important;
		z-index: 499;
		opacity: 0;
		position: fixed;
	    top: 46px;
	    left: 0;
	    width: calc(100%);
	    transform: translateX(-270px);
	    height: 100%;
	    #map {
    	    height: calc(100vh - 46px);
	    }
	}
	.logged-content.map-container-parent.moved-right {
		transition: all .3s ease-in-out .9s !important;
		opacity: 1;
		z-index: 500;
	}
	.logged-content.map-container-parent.moved-right.unpush-map {
		transform: translateX(0px);
		transition: all 0.3s ease-in-out !important;
	}
	.logged-content.map-container-parent.unpushed {
		transform: translateX(-270px);
		transition: all 0.3s ease-in-out !important;
	}
	


	.toggle-map-feed {
		right: 9px;
		display: inline-block;
		position: absolute;
		top: 9px;
		color: white;
	    font-size: 23px !important;
		&:hover {
			cursor: pointer;
		}
	}
	.toggle-map-feed.fa-chevron-circle-left {
		
	}
	
	.switch-to-timeline {
		display: inline-block;
		position: absolute;
		top: 51px;
		right: 276px;
		color: rgba(255,255,255,1);
		z-index: 1031;
		font-size: 23px !important;
		&:hover {
			cursor: pointer;
		}
		transition: all 0.2s ease-in-out 0.4s;
	}
	.switch-to-timeline.switch-inactive {
		transition: all 0.2s ease-in-out;
		color: rgba(255,255,255,0);
	}



	.activity-feed {
		position: absolute;
		right: 0;
		top: 46px;
		bottom: 16px;
		width: 270px;
		height: auto;
		overflow-y: auto;
		overflow-x: hidden;
		background-color: white;
		padding: 35px 7px 10px 7px;
		transform: translateX(100%);
		transition: all 0.5s ease-in-out;
		.feed-header {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			.toggle-map-feed-clone {
				display: inline-block;
				position: absolute;
				top: 5px;
				left: 6px;
				color: white;
				z-index: 1031;
				font-size: 23px;
				&:hover {
					cursor: pointer;
				}
			}
			p {
				background: $search-twitter-blue;
				color: white;
				margin: 0;
				padding: 10px 0px;
				text-align: center;
				font-size: 15px;
				font-weight: 600;
				letter-spacing: 0.5px;
			}
			
		}
		.feed-content {
			overflow: hidden;
			.item {
				&:hover {
					cursor: pointer;
				}
				padding: 5px 5px;
				border-bottom: 4px solid #F5F8FA;
				.home-user-screen-name {
					display: inline-block;
					font-weight: 500;
					color: grey;
					font-size: 12px;
				}
				.friend-profile-img {
					height: 40px;
					float: left;
					border: none;
					padding: 0 !important;
					position: relative;
					top: 4px;
				}
				.home-tweet-text {
					margin-left: 47px;
					margin-bottom: 0;
					padding-bottom: 0;
					font-size: 13px;
					line-height: 18px;
				}
			}
		}
		.feed-list {
			position: absolute;
			bottom: 0; 
			left: 0;
			width: 100%;
			padding: 10px;
			background-color: #ecf0f5;
			ul {
				margin: 0;
				padding: 0;
				li {
					margin: 0;
					padding: 8px;
					color: #333333;
					border: 1px solid $search-twitter-blue;
					color: white;
					margin-bottom: 7px;
					text-align: center;
					font-size: 15px;
					letter-spacing: 0.5px;
					&:last-child {
						margin-bottom: 0;
					}
				}
				li.active-feed {
					background-color: $search-twitter-blue;
					color: white;
					letter-spacing: 0.5px;
				}
			}
			p {
				border-top: px solid black;
				color: #333333;
				margin: 0;
				padding: 0;
				text-align: left;
				font-size: 15px;
				font-weight: 600;
				letter-spacing: 0.5px;
			}
		}
	}
	.activity-feed.show-feed {
		transform: translateX(0%);
		transition: all 0.3s ease-in-out;
	}
	.center-result-container.hide-feed {
		transform: translateX(100%);
		transition: all 0.3s ease-in-out;
	}
	.left-result-container.hide-feed {
		transform: translateX(100%);
		transition: all 0.3s ease-in-out;
	}
	.center-result-container.hidden-feed {
		transition: all 0.3s ease-in-out !important;
	}
	.left-result-container.hidden-feed {
		transition: all 0.3s ease-in-out;
	}

	.topologyItem {
		border-radius: 20px;
		height: 40px !important;
		width: 40px !important;
	}


	.location-fail-notice {
		display: none;
		position: absolute;
	    right: 36px;
	    top: 12px;
	    width: 300px;
	    background-color: white;
	    background-color: rgba(255,255,255,0.80);
	    line-height: 20px;
	    font-size: 16px;
	    .warning-sign {
	    	background-color: black;
	    	padding: 5px 0;
	    	text-align: center;
	    	i {
	    		color: #FBA81A;
	    	}
	    }
	    .notice-text {
	    	padding: 10px 15px 15px 15px;
	    	margin-bottom: 0;
	    }
	}


/* Style for map pop up */
	.leaflet-popup-content {
		width: auto !important;
		p {
			margin: 0 !important;
		}
	}
	.leaflet-control-layers-toggle {
	background-image: url('../images/layers.png');
	width: 36px;
	height: 36px;
	}

	.leaflet-popup {
		margin-left:5px;
		margin-bottom: 12px;
	}

	.single-tweet.map-tweet {
		margin: 0;
		padding: 0;	
		min-width: 250px;
		position: relative;
		transform: none;
		left: 0;
		top: 0;
		.top-metadata {
			img.avatar {
				height: 55px;
				width: 55px;
			}
			.user-data-wrapper {
				display: inline-block;
				font-size: 11px;
				margin-left: 20px;
				padding: 0;
			}
		}
		.detail-metadata {
			margin-top: 10px;
		}
	}


	.map-view .anonymous-session-content .blue-bar {
		margin-top: 46px;
	}

/* Style for embed content in map feed */
	.activity-feed .home-debugged-link-container {
		padding: 10px 0px 10px 0px;
		.article-site, .article-title {
			font-size: 12px;
			text-align: right;
			line-height: 16px;
		}
	}